<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            border:1px solid #ccc;
            position: absolute;
            left:0;
            right:0;
            margin:20px auto;
        }
    </style>
</head>
<body>
    <canvas id="box" width="800" height="450"></canvas>
</body>
<script>
    const box=document.querySelector('#box')
    const context=box.getContext('2d')

    //填充颜色
    context.fillStyle='#f00';
    //描边颜色
    context.strokeStyle='#00f';

    //矩形
   // context.fillRect(10,20,200,100);
   context.strokeRect(10,20,200,100);

   //绘制圆
   context.beginPath();
   context.strokeStyle='#f00';
   context.lineWidth=10;
   
   context.arc(120, 300, 80, Math.PI / 180 * 0, Math.PI / 180 * 360, false);

   //执行绘制
   context.stroke();

   //开始绘制
   context.beginPath();
   context.lineWidth=2;
   
   context.moveTo(396, 140);
   context.lineTo(489, 40);
   context.lineTo(582, 142);
   context.closePath();
   context.stroke();

   //绘制文本
   context.font='40px sans-serif';
   context.fillStyle='#f00';
   context.strokeStyle='#00f';
   context.textAlign='left';
   
   
   context.fillText('全栈2210A高薪就业', 377, 291);
  // context.strokeText('全栈2210A高薪就业', 377, 291);
   
   
    
</script>
</html>